import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

export default class TodoItem extends Component{

    static propTypes = {
        todo: PropTypes.object.isRequired,
        deleteTodo: PropTypes.func.isRequired
    }
    state = {editing: false }

    render() {
        const { todo, completeTodo, deleteTodo } = this.props

        return (
            <li className={classnames({
                'list-group-item':true,
                completed: todo.completed,
                editing: this.state.editing
            })}>
                {todo.text} 
                <i className="fa fa-close fa-fw fa-2x" 
                onClick={ () => deleteTodo(todo.id) }></i>
            </li>
        )
    }
}